<template>
  <div class="box section clearfix">
    <el-form :inline="true" style="text-align: left" ref="query" :model="query">
      <el-row class="query">
        <el-form-item label="类型:" prop="productId">
          <el-select placeholder="请选择" v-model="query.productId">
            <el-option v-for="item in statusArray" :key="item.itemValue" :label="item.description"
                       :value="item.itemValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业务经理:" prop="employeeName">
          <el-input placeholder="请输入" v-model="query.employeeName"></el-input>
        </el-form-item>
        <el-form-item label="客户处理代偿:" class="" prop="settleStatus">
          <el-select v-model="query.settleStatus" placeholder="请选择">
            <el-option label="未结清" value="0"></el-option>
            <el-option label="部分结清" value="1"></el-option>
            <el-option label="全部结清" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户姓名:" prop="borrowerName">
          <el-input placeholder="请输入" v-model="query.borrowerName"></el-input>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="danger" @click="clearFun" v-no-more-click>清空
          </el-button>
          <el-button type="primary" @click="queryFun" v-no-more-click>搜索
          </el-button>
        </el-form-item>
        <el-col :span="24">
          <el-form-item>
            <el-button size="small" type="primary" @click="orderExport" v-no-more-click>导出
            </el-button>
            <el-button size="small" type="primary" @click="PersonnelDia = true" v-no-more-click
                       v-if="query.execMonth">添加
            </el-button>
            <el-button size="small" type="danger" @click="del" v-no-more-click v-if="query.execMonth">删除
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>


    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column type="index" label="序号" align="center" width="80px" :show-overflow-tooltip="true" />
      <el-table-column prop="orderNum" label="订单号" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="borrowerName" label="姓名" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="productType" label="类别" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="contractGuaranteeMoney" label="贷款金额（万元）" width="140" align="center"
                       :show-overflow-tooltip="true" />
      <el-table-column prop="contractGuaranteeMonth" label="期限" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="employeeName" label="业务经理" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="allRepayMoney" label="代偿总金额（元）" width="140" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="settleState" label="代偿结清情况" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="otherExpenses" label="其他支出合计" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="allSettleMoney" label="代偿结清金额（元）" width="150" align="center"
                       :show-overflow-tooltip="true" />
      <el-table-column prop="finalSettleTime" label="结清时间" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="noRepayMoney" label="代偿未结清金额" align="center" :show-overflow-tooltip="true" />
      <el-table-column prop="compensatoryRemark" label="备注" align="center" :show-overflow-tooltip="true" />
      <el-table-column fixed="right" label="操作" width="250" align="center">
        <template slot-scope="{ row }">
          <el-button v-if="showDetailsBtn" type="text" size="small" @click="detail(row)" style="color: #3b9df8"
                     v-no-more-click>代偿明细
          </el-button>
          <el-button type="text" size="small" @click="other(row)" style="color: #3b9df8"
                     v-no-more-click>其他支出
          </el-button>
          <el-button v-if="showSettleBtn" type="text" size="small" @click="settlement(row)" style="color: #FFA42F"
                     v-no-more-click>代偿结清
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页控件-->
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination background layout="total,prev, pager, next, sizes" :total="total" :page-size="query.pageSize"
                     :current-page.sync="currentPage" :page-sizes="[10, 20, 30, 40]"
                     @current-change="handleCurrentChange"
                     @size-change="handleSizeChange">
      </el-pagination>
    </div>
    <el-dialog title="代偿明细" :visible.sync="detailDia" append-to-body width="60%" top="30px" @close="cancel">
      <detailCompensation v-if="detailDia" :id="currentRow.id"></detailCompensation>
    </el-dialog>
    <el-dialog title="代偿结清" :visible.sync="settlementDia" append-to-body width="60%" top="30px"
               @close="settlementCancel">
      <el-row>
        <el-form :inline="true" :rules="rules" style="text-align: left" label-width="160px" ref="addForm"
                 :model="addForm">
          <el-col :span="12">
            <el-form-item label="结清状态：" prop="settleStatus">
              <el-select v-model="addForm.settleStatus" placeholder="请选择">
                <el-option label="部分结清" :value="1"></el-option>
                <el-option label="全部结清" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="indexClass">
            <el-form-item label="结清金额：" prop="settleMoney">
              <el-input v-model="addForm.settleMoney" type="number"></el-input>
            </el-form-item>
            <span class="indexBox">元</span>
          </el-col>

          <el-col :span="12">
            <el-form-item label="转账时间：" prop="settleTime">
              <el-date-picker v-model="addForm.settleTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
                              placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="indexClass">
            <el-form-item label="备注：" prop="compensatoryRemark">
              <el-input v-model="addForm.compensatoryRemark"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span  class="dialog-footer df-botton">
        <el-button type="primary" @click="dbfqForm">确 定</el-button>
      </span>
      <p class="dc-table-title">代偿还款明细</p>
      <el-table
        :data="dcTableData"
        border
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="100"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="items"
          label="项目"
          width="400"
          header-align="center"
          align="center"
         >
        </el-table-column>
        <el-table-column
          prop="transferAmount"
          label="转账金额"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="日期"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="note"
          label="备注"
          header-align="center"
          align="center"
          width="300"
        >
        </el-table-column>
      </el-table>
      <!--分页控件-->
      <div class="pagination">
        <el-pagination  small background  layout="prev, pager, next"  :total="dcTotal" :page-size="dcPageSize"
                      :current-page.sync="dcPageNum"
                        @current-change="dcCurrentChange"
                      >
        </el-pagination>
      </div>

    </el-dialog>
    <el-dialog title="其他支出明细：" :visible.sync="otherExpenditure" append-to-body width="60%" top="30px"
               @close="closeOtherExpenses">
      <el-row>
        <el-form :inline="true" style="text-align: left" label-width="160px" ref="otherForm"
                 :model="otherForm">
          <el-col :span="12" class="indexClass">
            <el-form-item label="律师费：" prop="attorneyFees">
              <el-input v-model="otherForm.attorneyFees" type="number"></el-input>
            </el-form-item>
            <span class="indexBox">元</span>
          </el-col>
          <el-col :span="12" class="indexClass">
            <el-form-item label="资金占用费（担保）：" prop="occupancyFees">
              <el-input v-model="otherForm.occupancyFees" type="number"></el-input>
            </el-form-item>
            <span class="indexBox">元</span>
          </el-col>
          <el-col :span="13" class="indexClass">
            <el-form-item label="公诉费/诉讼费/仲裁费：" label-width="200px" prop="legalCosts">
              <el-input v-model="otherForm.legalCosts" type="number"></el-input>
            </el-form-item>
            <span class="indexBox">元</span>
          </el-col>
          <el-col :span="12" class="indexClass">
            <el-form-item label="评估费：" prop="assessmentFees">
              <el-input v-model="otherForm.assessmentFees" type="number"></el-input>
            </el-form-item>
            <span class="indexBox">元</span>
          </el-col>
          <el-col :span="12" class="indexClass">
            <el-form-item label="拍卖费：" prop="auctionFees">
              <el-input v-model="otherForm.auctionFees" type="number"></el-input>
            </el-form-item>
            <span class="indexBox">元</span>
          </el-col>
          <el-col :span="12" class="indexClass">
            <el-form-item label="其他费用合计：" prop="otherFees">
              <el-input v-model="otherForm.otherFees" type="number"></el-input>
            </el-form-item>
            <span class="indexBox">元</span>
          </el-col>

          <el-col :span="24" class="indexClass">
            <el-form-item label="备注：" prop="remark">
              <el-input style="width: 100%" type="textarea" v-model="otherForm.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitOthers">确 定</el-button>
      </span>

    </el-dialog>
  </div>
</template>

<script>
import {
  getPermType,
  getCompensatory,
  getRepaySettle,
  getOtherExpenses,
  updateOtherExpenses,
  getRepayDetailPage
} from "../../../src/assets/js/api";
import { expotOut } from "../../assets/js/utlis";
import { checkPermiss } from "../../assets/js/utlis";
import detailCompensation from "../../components/compensatory/detailCompensation.vue";

export default {
  name: "customerClosure",
  components: { detailCompensation },
  data() {
    return {
      query: {
        pageSize: 10,
        pageNum: 1,
        borrowerName: "",//客户姓名
        employeeName: "",//业务经理
        productId: "",//类别
        settleStatus: ""//结清状态: 0未结清，1部分结清 2全部结清
      },
      tableData: [],
      total: 10,
      pages: 0,
      currentPage: 1,
      detailDia: false,
      settlementDia: false,
      fileParmas: {},
      addForm: {
        "settleMoney": "",
        "settleStatus": "",
        "settleTime": "",
        compensatoryRemark:''
      }, //添加数据data
      statusArray: [],
      golbalPermissions: [],
      loading: false,
      currentRow: "",//当前行
      rules: {
        settleStatus: [
          { required: true, message: "请选择结清状态：", trigger: "blur" }
        ],
        settleMoney: [
          { required: true, message: "请输入结清金额：", trigger: "blur" }
        ],
        settleTime: [
          { required: true, message: "请选择结清时间：", trigger: "blur" }
        ]
      },//验证
      otherExpenditure: false,
      otherForm: {
        "assessmentFees": "",
        "attorneyFees": "",
        "auctionFees": "",
        "id": "",
        "legalCosts": "",
        "loanId": "",
        "occupancyFees": "",
        "otherFees": "",
        "remark": ""
      },
      dcTableData:[],
      dcPageNum:1,
      dcPageSize:3,
      dcTotal:0,

    };
  },
  created() {
    this.getList();
    this.getProductsData();
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
  },
  computed: {
    //代偿结清按钮控制
    showSettleBtn() {
      return checkPermiss("business:compensatory:repaySettle", this.golbalPermissions);
    },
    //代偿明细按钮控制
    showDetailsBtn() {
      return checkPermiss("business:compensatory:repayInfo", this.golbalPermissions);
    },
    userInfoExport: function() {
      return checkPermiss("business:sign:exportPerson", this.golbalPermissions);
    }
  },
  methods: {
    //代偿结清分页
    dcCurrentChange(cpage){
      this.dcPageNum=cpage;
      this.getDCDetail();
    },
    //获取代偿还款明细
    getDCDetail(){
      getRepayDetailPage({
        orderNumber:this.currentRow.orderNum,
        pageNum:this.dcPageNum,
        pageSize:this.dcPageSize
      }).then(res=>{
        this.dcTableData=res.data.records;
        this.dcTotal=res.data.total;
      })
    },
    //提交其他支出
    submitOthers() {
      updateOtherExpenses(this.otherForm).then(() => {
        this.$message.success("提交成功");
        this.$refs["otherForm"].resetFields();
        this.closeOtherExpenses();
        this.getList();
      });
    },
    //获取其他支出
    getOtherExpenses(id) {
      getOtherExpenses(id).then(res => {
        this.otherForm = res.data;
      });
    },
    //关闭其他支出
    closeOtherExpenses() {
      this.otherExpenditure = false;
    },
    //其他支出
    other(row) {
      this.otherExpenditure = true;
      this.getOtherExpenses(row.id);
    },
    //结清
    settlement(row) {
      this.settlementDia = true;
      this.currentRow = row;
     this.getDCDetail();

    },
    //关闭代偿结清
    settlementCancel() {
      this.$refs["addForm"].resetFields();
      this.dcPageNum=1;
      this.settlementDia = false;


    },
    //结清
    dbfqForm() {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          if (this.addForm.settleMoney) {
            this.addForm.settleMoney = +this.addForm.settleMoney;
          }

          getRepaySettle({ id: this.currentRow.id, ...this.addForm }).then(() => {
            this.$message.success("提交成功");
            this.settlementCancel();
            this.getList();
          });
        } else {
          this.$message.error("请填写完整数据");
        }
      });

    },

    //添加/编辑关闭弹层
    cancel() {
      this.detailDia = false;
    },

    // 获取产品数组列表!
    getProductsData() {
      getPermType("order_product").then((res) => {
        this.statusArray = res.data.map((item) => {
          item.itemValue = +item.itemValue;
          return item;
        });
      });
    },

    //   获取数据
    getList() {
      getCompensatory(this.query).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.records;
          this.currentPage = res.data.current;
          this.total = res.data.total;
          this.pages = res.data.pages;
        }
      });
    },
    //代偿明细
    detail(row) {
      this.detailDia = true;
      this.currentRow = row;

    },


    //   清空按钮
    clearFun() {
      this.$refs["query"].resetFields();
      // this.query = {};
      this.getList();
    },

    // 搜索按钮
    queryFun() {
      this.query.pageNum = 1;
      this.getList();
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNum = cpage;
      this.getList();
    },
    handleSizeChange(psize) {
      this.query.pageSize = psize;
      this.getList();
    },
    orderExport() {
      this.fileParmas = { ...this.query };
      expotOut(
        "post",
        "/business/compensatory/export",
        this.fileParmas, // 导出请求参数
        "代偿客户" // 导出文件名字
      );
    }
  }
};
</script>

<style scoped type="less">
::v-deep .el-table td {
  padding: 10px 0;
}

::v-deep .el-table th {
  padding: 10px 0;
}

.query ::v-deep .el-input__inner {
  height: 32px;
}

.query ::v-deep .el-input__icon {
  line-height: 32px;
}

.query ::v-deep .el-form-item {
  width: 320px;
}

.query ::v-deep .vue-treeselect__control {
  line-height: 30px;
  height: 32px;
}

.query ::v-deep .vue-treeselect__single-value,
.query ::v-deep .vue-treeselect__placeholder {
  line-height: 30px;
}

::v-deep .btn .el-button {
  line-height: 0;
  width: 80px;
  height: 32px;
}

::v-deep .el-table th > .cell {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgba(59, 157, 248, 0.1);
}

.box {
  position: relative;
  padding: 20px 20px 50px 20px;
  background: #fff;
}

::v-deep .el-pagination {
  position: absolute;
  right: 0;
  margin-top: 20px;
}

::v-deep .el-pagination__total {
  visibility: hidden;
}

.title {
  font-family: Microsoft YaHei;
  font-size: 12px;
  font-weight: 400;
  line-height: 21px;
  position: absolute;
  left: 0;
  margin-top: 15px;
  color: rgba(51, 51, 51, 1);
}

/deep/ .indexClass {
  position: relative;
}

.indexBox {
  position: absolute;
  top: 10px;
  right: 20%;
  /*font-size: 18px;*/
  /*color: red;*/
}

::v-deep .el-form-item__content {
  width: 220px;
}

::v-deep .el-dialog__footer {
  text-align: center;
}

.dc-table-title{
  font-size: 18px;
  color: #303133;
  margin: 25px 0;
}
.df-botton{
  display: block;
  text-align: center;
}
</style>
